<template>
  <div class="mb-10 materialCode">
    <div class="table-name-content">资源资产编码</div>
    <wz-table
      :columns="wzApplicationColumn"
      :use-index="true"
      :table-data="applyDetails"
    >
      <template #scanConfirm="{ row }">
        <div>
          {{ +row.scanConfirm ? "是" : "否" }}
        </div>
      </template>
      <template #longitude="{ row }">
        <div>
          {{ row.dimension ? (row.longitude + "," + row.dimension) : row.longitude }}
        </div>
      </template>
      <template #labelId="{ row }">
        <div class="click-row" @click="handleClick(row)">
          {{ row.labelId }}
        </div>
      </template>
      <template #labelPhotoId="{row}">
        <div v-if="!!row.labelPhotoId" class="click-row" @click="handleView(row.labelPhotoId)">
          查看贴签照片
        </div>
      </template>
    </wz-table>
    <pagination
        v-if="pageParam.total > 10"
        :total="pageParam.total"
        :page.sync="pageParam.pageNum"
        :limit.sync="pageParam.pageSize"
        @pagination="doSearch"
    />
    <el-dialog
      v-if="dialogVisible"
      :visible.sync="dialogVisible"
      width="50%"
      :modal="false"
    >
      <div slot="title" class="dialog-header">贴签照片</div>
      <div class="zr-dialog-content">
        <el-image
          :src="currentUrl"
          fit="fit"
        />
      </div>
    </el-dialog>
  </div>
</template>
<script>
import SysConst from "@/common/const";

const RESOURCE_LABEL_LIST = [
    {
        label: '资源资产编码',
        prop: 'sourceAssetCode',
        elProps: {
            width: '120px',
            'show-overflow-tooltip': true
        }
    },
    {
        label: '标签ID',
        prop: 'labelId',
        elProps: {
            width: '120px',
            'show-overflow-tooltip': true
        }
    },
    {
        label: '退库状态',
        prop: 'retreatStatusName',
        elProps: {
            width: '120px',
            'show-overflow-tooltip': true
        }
    },
    { label: '创建时间', prop: 'createTime', elProps: {
        width: '120px',
        'show-overflow-tooltip': true
    }},
    { label: '更新时间', prop: 'updateTime', elProps: {
        width: '120px',
        'show-overflow-tooltip': true
    }},
    { label: '是否扫码确认', prop: 'scanConfirmName', elProps: {
        width: '120px',
        'show-overflow-tooltip': true
    }},
    { label: '赋码贴签人', prop: 'labelUser', elProps: {
        width: '120px',
        'show-overflow-tooltip': true
    }},
    { label: '扫码确认人', prop: 'confirmUserName', elProps: {
        width: '120px',
        'show-overflow-tooltip': true
    }},
    { label: '确认人角色', prop: 'confirmUserRoleName', elProps: {
        width: '120px',
        'show-overflow-tooltip': true
    }},
    { label: '扫码确认时间', prop: 'confirmTime', elProps: {
        width: '120px',
        'show-overflow-tooltip': true
    }},
    {
        label: '赋码贴签方式',
        prop: 'fromPhotoName',
        elProps: {
            width: '230px',
            'show-overflow-tooltip': true
        }
    },
    {
        label: '创建人姓名',
        prop: 'createUserName',
        elProps: {
            width: '120px',
            'show-overflow-tooltip': true
        }
    },
    {
        label: '数量',
        prop: 'amount',
        elProps: {
            width: '120px',
            'show-overflow-tooltip': true
        }
    },
    {
        label: '物料分类',
        prop: 'catTypePmsName',
        elProps: {
            width: '120px',
            'show-overflow-tooltip': true
        }
    },
    {
        label: '经纬度',
        prop: 'longitude',
        elProps: {
            width: '150px',
            'show-overflow-tooltip': true
        }
    },
    {
        label: '贴签位置',
        prop: 'labelLocation',
        elProps: {
            width: '120px',
            'show-overflow-tooltip': true
        }
    },
    {
        label: '扫码地址',
        prop: 'address',
        elProps: {
            width: '120px',
            'show-overflow-tooltip': true
        }
    },
    {
        label: '退库单ID',
        prop: 'retreatdetailid',
        elProps: {
            width: '120px',
            'show-overflow-tooltip': true
        }
    },
    {
        label: '贴签照片',
        prop: 'labelPhotoId',
        elProps: {
            width: '120px',
            'show-overflow-tooltip': true
        }
    }
]
// 系统常量配置
import wzTable from './cTable'
import { queryAssetLabelDatailList, openAssetFull } from '@/api/material'
import $ from 'jquery'
export default {
    name: 'MaterialCodeLabel',
    components: { wzTable },
    props: {
        currentRow: {
            type: Object,
            default: () => ({})
        }
    },
    data() {
        return {
            wzApplicationColumn: [],
            applyDetails: [],
            url: '',
            token: '',
            userId: '',
            acctId: '',
            dialogVisible: false,
            currentUrl: '',
            // 分页信息
            pageParam: {
              pageSize: SysConst.PAGESIZE, // 每页显示val条
              pageNum: SysConst.CURRENT_PAGE, // 当前页
              total: SysConst.TOTAL // 总数
            },
        }
    },
    computed: {
        status() {
            return this.infoList.osName === '已完成'
        }
    },
    async mounted() {
        this.wzApplicationColumn = RESOURCE_LABEL_LIST
        if (this.currentRow) {
            await this.doSearch();
            const openAssetFullRes = await openAssetFull()
            console.log(openAssetFullRes)
            if (+openAssetFullRes.code === 200) {
                this.url = openAssetFullRes.data.url
                this.token = openAssetFullRes.data.token
                this.userId = openAssetFullRes.data.userId
                this.acctId = openAssetFullRes.data.acctId
            }
        }
    },
    methods: {
        async doSearch(item){
          const res = await queryAssetLabelDatailList({
            bundingId: this.currentRow.bundingId,
            osDetailId: this.currentRow.osDetailId,
            staffId: this.currentRow.fieldProjectManager,
            pageNum: item?.page || SysConst.CURRENT_PAGE,
            pageSize: item?.limit || SysConst.PAGESIZE
          })
          if (+res.code === 200) {
            this.applyDetails = res.data?.list
            this.pageParam.total = res.data?.total || 0
            this.pageParam.pageSize = item?.limit || SysConst.PAGESIZE
            this.pageParam.pageNum = item?.page || SysConst.CURRENT_PAGE
          }
        },
        handleClick(row) {
            console.log(row)
            const toUrl = `${this.url}ctb_thematic_web/newTowerSkip/assetsRecordNew?res_id=${row.labelId}&resourceAssetCode=${row.sourceAssetCode}`
            const params = {}
            params.pwdaToken = this.token
            // params.acctId = row.acctId || ''
            // acctId
            params.acctId = this.acctId
            // params.userName = row.staffId || ''
            params.userName = this.userId
            const newWin = window.open()
            const form = $("<form method='post'></form>")
            form.attr({ action: toUrl })
            $.each(params, function(key, value) {
                const input = $("<input type='hidden' >")
                input.attr({ name: key })
                input.val(value)
                form.append(input)
            })
            form.appendTo(newWin.document.body)
            form.submit()
        },
        handleView(url) {
            this.dialogVisible = true
            this.currentUrl = url
        }
    }
}
</script>
<style scoped lang="scss">
.materialCode{
 ::v-deep .el-pagination .btn-next .el-icon{
    transform: rotate(90deg) !important;
  }
}
.el-upload--text {
    width: 100%;
}
.btnflex {
    display: flex;
    justify-content: space-between;
}
.color-yellow {
    color: #ffc481;
}
.color-red {
    color: #eb4b4b;
}
.color-green {
    color: #77dfaf;
}
.el-table th {
    padding: 0px 0;
    text-align: center;
    font-size: 12px;
    color: #333333;
    letter-spacing: 0;
}
.el-table td {
    padding: 0px 0;
    text-align: center;
    font-size: 2px;
    color: #333333;
    letter-spacing: 0;
}
.click-row {
    color: #53c7f8;
    cursor: pointer;
}
.zr-dialog-content{
    display: flex;
    width:100%;
    justify-content: center;
    height:50vh;
    .el-image{
        max-width: 100%;
        max-height: 49vh;
    }
}
</style>
